<!--
 * @Descripttion: 
 * @version: 
 * @Author: hutao
 * @Date: 2023-05-04 15:12:14
 * @LastEditors: hutao
 * @LastEditTime: 2023-05-17 09:49:00
-->
<template>
  <span v-if="readonly">
    <!-- <el-switch :disabled="true" v-model="value" active-color="var(--warning)">
    </el-switch> -->

    <span
      v-if="value"
      style="color:var(--warning);font-size:var(--font-size-content)"
      >&nbsp;需归还</span
    >
    <span v-else style="font-size:var(--font-size-content)"
      >&nbsp;不限制归还</span
    >
  </span>
  <span v-else>
    <el-switch
      v-model="state.value"
      @change="onChange"
      active-color="var(--warning)"
    >
    </el-switch>

    <span
      v-if="state.value"
      style="color:var(--warning);font-size:var(--font-size-content)"
      >&nbsp;需归还</span
    >
    <span v-else style="font-size:var(--font-size-content)"
      >&nbsp;不限制归还</span
    >
  </span>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  value: boolean;
}
@Component
export default class Index extends Vue {
  @Prop() readonly!: boolean;
  @Prop() value!: boolean;
  /** 数据 */
  state: State = {
    loading: false,
    value: false,
  };
  /** 生命周期 */
  /** 方法 */
  onChange() {
    this.$emit('input', this.state.value);
    this.$emit('change', this.state.value);
  }
  /** 监听 */
  @Watch('value', { immediate: true })
  onValue(val: boolean) {
    this.state.value = val;
  }
  /** 方法 */
  /** 监听 */
  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
